<template>
  <view class="wz_black xd">
    <view class="sy_bg fz_12" style="height: 200px">
      <view class="wh_9-5 jz" style="padding: 20px 0">
        <!--        配送方式-->
        <view class="split_3 wz_jz wh_max wz_black boxs"
              style="padding:0 1px 1px;border: 1px solid #3a9e5f;border-radius: 20px;background-color: #e6f6eb">
          <view class="fz_14" :class="psfs_id===item.id?'psfs_xz':'psfs'" v-for="(item,index) in psfs" :key="index"
                @click="addPsfs(item.id)"
                style="border-radius: 20px;padding: 3px 0">
            {{ item.title }}
          </view>
        </view>

        <!--    地址模块-->
        <view class="ba_white xyy boxs pad_20 mag_t-20" style="border-radius: 10px">
          <view class="wh_f">
            <view class="flex_1 fz_20 em">
              <text>请根据统一配送地址</text>
            </view>
            <view class="wz_jz" style="width:5px">
              <image  src="../../static/icon/right.png" style="width: 5px;height: 10px"></image>
            </view>
          </view>
          <view class="fz_12 pad_10_0" style="color:#3a9e5f">
            <text>根据你常用地址自动能够选择, 请确认</text>
          </view>
          <view class="wh_f em">
            <view class="flex_1">
              送达时间
            </view>
            <view class="wz_lv ">
              <text>请选择送达时间</text>
              <image class="mag_l-10 " src="../../static/icon/right.png" style="width: 5px;height: 10px"></image>
            </view>
          </view>

          <view class=" pad_t-10" style="color:#3a9e5f">因商家繁忙, 送达时间可能波动</view>
        </view>
        <!--    地址模块-->
        <view class="ba_white xyy boxs mag_t-20" style="border-radius: 10px;padding: 20px 20px 10px">
          <view v-for="(item,index) in shopList" :key="index" class="wh_f fz_14 mag_t-10">
            <view style="width: 60px">
              <view class="img_zfx"><image :src="item.imgUrl"></image></view>
            </view>
            <view class="flex_1 boxs wz_hui " style="padding-left: 10px">
              <view class="fz_16 em wz_black">{{ item.name }}</view>
              <view>{{ item.age }}g</view>
              <view>x{{ item.num }}</view>
            </view>
            <view style="width: 60px">
              <view class="em fz_16">￥{{ item.money }}</view>
              <view class="scx wz_hui">￥{{ item.yj }}</view>
            </view>
          </view>
          <view class="wz_jz wz_hui">
            <text>展开 (共4件)</text>
          </view>
        </view>
        <!--    活动模块-->
        <view class="ba_white xyy boxs mag_t-20 fz_14 spjs" style="border-radius: 10px;padding: 20px 20px 10px">
          <view class="wh_f">
            <view class="em flex_1 wz_black">商品总价</view>
            <view>
              <text class="scx wz_hui">￥415.00</text><text class="em mag_l-5">￥327.64</text>
            </view>
          </view>
          <view class="wh_f">
            <view class="em flex_1 wz_black">活动</view>
            <view>
              <text class="scx wz_hui">暂无活动</text>
            </view>
          </view>
          <view class="wh_f">
            <view class="em flex_1 wz_black">
              共富一级
              <text class="bor_5 mag_l-10 fz_10"
                    style="background-color: #fef5df;padding:0 5px 0;color: #ff9a2e;border: 1px solid #ff9a2e">
                <text>9.8折</text>
              </text>
            </view>
            <view>
              <text class="scx wz_hui">等级折扣价格</text><text class="em mag_l-5">￥321.09</text>
            </view>
          </view>
          <view class="wh_f">
            <view class="em flex_1 wz_black">优惠券</view>
            <view>
              <text class="wz_hui">共0张 , 0张可用</text>
            </view>
          </view>
          <view class="wh_f">
            <view class="em flex_1 wz_black">配送费</view>
            <view>
              <text class="wz_qred">配送费活动-5元</text><text class="scx wz_hui mag_l-5">￥5.00</text>
              <text class="em mag_l-5">￥0</text>
            </view>
          </view>
        </view>
        <!--        支付模块-->
        <view class="ba_white xyy boxs mag_t-20 fz_14 spjs" style="border-radius: 10px;padding: 10px 20px">
          <view class="wh_f"  @click="pay_id = 1">
            <view class="flex_1">
              <image class="centerdq" src="../../static/icon/ye.png" style="width: 30px;height: 30px"/>
              <text class="wz_black centerdq mag_l-5 em">余额支付</text>
            </view>
            <view class=" czjz_flex">
              <text class="centerdq ">余额: ¥ 0.00
              </text>
              <image v-if="pay_id===2" class="mag_l-10" src="../../static/icon/zfk.png" style="width: 20px;height: 20px"/>
              <image v-if="pay_id===1" class="mag_l-10" src="../../static/icon/chenggong.png" style="width: 20px;height: 20px"/>
            </view>
          </view>
          <view class="wh_f" @click="pay_id = 2">
            <view class="flex_1">
              <image class="centerdq" src="../../static/icon/wxzf.png" style="width: 30px;height: 30px"/>
              <text class="wz_black centerdq mag_l-5 em">微信支付</text>
            </view>
            <view class=" czjz_flex">
              <image v-if="pay_id===1" class="mag_l-5" src="../../static/icon/zfk.png" style="width: 20px;height: 20px"/>
              <image v-if="pay_id===2" class="mag_l-5" src="../../static/icon/chenggong.png" style="width: 20px;height: 20px"/>
            </view>
          </view>
        </view>
      </view>
      <view style="height:60px;"></view>
    </view>

    <!--    底部菜单-->
    <view class="pm ba_white box_yy" style="width: 100%;height:60px;left: 0;bottom: 0">
      <view class="wh_f he_max">
        <view class="flex_1 wh_f czjz_flex ">
          <view class="boxs pad_l-20">
            <view>
              <text class="wz_hui">待支付 </text>
              <text class="wz_qred fz_10"> ¥ </text>
              <text class="wz_qred em fz_18"> 321.09</text>
            </view>
            <view class="wz_qred fz_10">已优惠 ¥93.91</view>
          </view>
        </view>
        <view class="czjz_flex he_max">
          <view class="jz_flex wz_white bor_25 mag_r-10"
                style="background-color: #e63946;width: 110px;height: 40px">
            <text>去结算</text>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>
<script>
export default {
  name: "index",
  data(){
    return{
      isAddressShow:true,
      psfs:[{id:1,title:"统一外送"},{id:2,title:"到站自提"},{id:3,title:"送货上门"}],
      psfs_id:1,
      shopList:[
        {
          id:1,
          imgUrl:'../../static/img/nl.png',
          name:'泥螺',
          ys:'1000+',
          kc:1998,
          money:'69.88',
          text:'收藏100+',
          age:330,
          yj:"79.00",
          sum:0
        },
        {
          id:2,
          imgUrl:'../../static/img/hz.png',
          ys:'900+',
          kc:2003,
          name:'海蜇',
          money:'147.88',
          text:'10+回头客',
          age:500,
          yj:"169.00",
          sum:0
        },
        {
          id:3,
          imgUrl:'../../static/img/kj.png',
          ys:'700+',
          kc:1000,
          name:'Kj大骨头',
          money:'12.64',
          text:'收藏100+',
          age:250,
          yj:"28.00",
          sum:0
        },
      ],
      pay_id:1
    }
  },
  methods:{
    addPsfs(e){
      this.psfs_id = e
    }
  }
}
</script>
<style scoped>
.spjs>view{
  padding: 10px 0;
}
.sy_bg{
  background-image: url("https://xdjzapi.towngo.cn/wx/indextopbj.png");
  background-size: 100% 100%;
}
.psfs_xz{
  background-color: #3a9e5f;
  color: white;
}
.psfs{
  color: #3a9e5f;
}

.xz_lx{
  height: 30px;
  width: 6px;
  background-color: #3a9e5f;
  border-radius: 0 10px 10px 0;
}
.xz_menu{
  background-color: white;
}
</style>
